<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<canvas id="c" width="1280" style="width: 1280px; height: 296px;"
		height="296"></canvas>

	<script>
		var a = document.getElementsByTagName('canvas')[0];
		var b = document.body;
		var d = function(e) {
			return function() {
				e.parentNode.removeChild(e);
			};
		}(a);
		// unprefix some popular vendor prefixed things (but stick to their original name)
		var AudioContext = window.AudioContext || window.webkitAudioContext;
		var requestAnimationFrame = window.requestAnimationFrame
				|| window.mozRequestAnimationFrame
				|| window.webkitRequestAnimationFrame
				|| window.msRequestAnimationFrame || function(f) {
					setTimeout(f, 1000 / 30);
				};
		// fix bug in safari: http://qfox.nl/weblog/218
		document.body.clientWidth;
		// auto resize (original) canvas. call `onresize(w,h) to limit the size of the canvas
		(window.onorientationchange = window.onresize = function(a) {
			var mw = Infinity;
			var mh = Infinity;
			var min = Math.min;

			return function(w, h) {
				if (arguments.length === 2) {
					mw = w;
					mh = h;
				}
				a.style.width = (a.width = min(mw, innerWidth)) + 'px';
				a.style.height = (a.height = min(mh, innerHeight)) + 'px';
			};
		}(a))();

		var c = a.getContext('2d');
	</script>
	<script>
		b.onclick = function() {
			v = v ? clearInterval(v) : setInterval(f, 16)
		}
		c.strokeStyle = "#0ff";
		c.textBaseline = "top";
		c.lineWidth = .5;
		M = Math;
		S = M.sin;
		C = M.cos;
		W = a.width;
		H = a.height;
		r = .7;
		t = 15;
		P = M.PI / 2;

		function g(b, a) {
			b = {
				x : b.x + C(b.a + a) * b.l * r,
				y : b.y + S(b.a + a) * b.l * r,
				l : b.l * r,
				a : b.a + a
			};
			c.moveTo(b.x, b.y);
			c.lineTo(b.x - b.l * C(b.a), b.y - b.l * S(b.a));
			return b;
		}

		v = setInterval(f = function() {
			c.fillStyle = "#000";
			c.fillRect(0, 0, W, H);
			c.beginPath();
			i = 15;
			t += .01;
			a = .4 - C(t) * P;
			d = (S(t) + 1.4);
			bs = [ {
				x : W / 2,
				y : H / 2,
				l : 150,
				a : -P
			} ];
			while (i--) {
				nbs = [];
				while (b = bs.pop()) {
					nbs.push(g(b, -a * .5 / d), g(b, a * d / .5))
				}
				bs = nbs
			}
			c.stroke();
			c.fillStyle = "#fff";
			c.fillText("click to pause", 9, 9)
		}, 16)
	</script>
</body>
</html>